<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="libs/angular/angular-material/angular-material.css">
    <link rel="stylesheet" href="libs/angular/angular-datatime-picker/material-datetimepicker.min.css">
    <link rel="stylesheet" href="css/index.css">

    <script src="libs/angular/angular/angular.js"></script>
    <script src="libs/angular/angular-animate/angular-animate.min.js"></script>
    <script src="libs/angular/angular-material/angular-material.js"></script>
    <script src="libs/angular/angular-aria/angular-aria.min.js"></script>

    <script src="libs/angular/angular-datatime-picker/angular-material-datetimepicker.min.js"></script>


    <script src="libs/angular/angular-message/angular-messages.min.js"></script>
    <script src="libs/angular/angular-message/angular-messages.js"></script>

    <!-- chart -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
    <script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>



    <script src="js/index.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>

</head>

<body>
    <div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill>
        <div ng-cloak layout="column" layout-fill>
            <md-toolbar>
                <div class="md-toolbar-tools">
                    <div class="flex-20">
                        <img src="./img/png/icon.png" style="height: 40px;width: 40px;">
                    </div>
                    <div class="flex-60">
                        <h2 class="md-title" layout="row" layout-align="center">城市大数据信息监测仿真平台</h2>
                    </div>
                    <div class="flex-20" layout="row" layout-align="end">2021-01-23 17:09</div>
                </div>
            </md-toolbar>
            <md-tabs flex layout="column" layout-fill>
                <md-tab label="对象挖掘" layout-fill>
                    <md-content layout="column" layout-fill>
                        <div flex='24' layout="row">
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row" layout-align="start">
                                        <h2 class="flex-30" layout="row" layout-align="center center">对象<br>轨迹</h2>
                                        <md-radio-group class="flex-50" ng-model="data.group1" layout="column"
                                            layout-align="center start">
                                            <md-radio-button value="手机">手机</md-radio-button>
                                            <md-radio-button value="车牌">车牌</md-radio-button>
                                            <md-radio-button value="身份">身份</md-radio-button>
                                            <md-radio-button value="人脸">人脸</md-radio-button>
                                        </md-radio-group>
                                    </div>
                                </md-card>
                            </div>
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row" layout-align="start">
                                        <h2 class="flex-30" layout="row" layout-align="center center">对象<br>轨迹</h2>
                                        <md-time-picker class="flex-30" ng-model="time" message="message"
                                            read-only="readonly" mandatory="required" no-meridiem no-auto-switch>
                                        </md-time-picker>
                                    </div>
                                </md-card>

                            </div>
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row" layout-align="start">
                                        <h2 class="flex-30" layout="row" layout-align="center center">地域<br>约束</h2>
                                        <div class="flex-60" layout="column" layout-align="end start">
                                            <h4 layout="row" layout-align="end start"
                                                style="margin-top: 21px; margin-bottom: 21px; margin-left: 10px;">上海
                                            </h4>
                                            <h4 style=" margin-top: 0px; margin-bottom: 21px; margin-left: 10px; ">标记 |
                                                选择</h4>
                                        </div>
                                    </div>
                                </md-card>
                            </div>
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row">
                                        <h2 class="flex-100" layout="row" layout-align="center center">挖掘对象<br>列表
                                        </h2>
                                    </div>
                                </md-card>
                            </div>
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row">
                                        <h2 class="flex-100" layout="row" layout-align="center center">结果<br>统计</h2>
                                    </div>
                                </md-card>
                            </div>
                        </div>
                        <div flex='75' layout="row">
                            <div flex='60'>
                                <div id="container" layout-fill></div>
                            </div>
                            <div flex='40' layout="row" layout-fill>
                                <div flex='50' layout="column">
                                    <div flex="33">12</div>
                                    <div flex="66">
                                        <md-card md-theme-watch layout-fill>
                                                <h5>对象详细信息</h5>
                                                姓名：王小二<br>
                                                身份证号：
                                                324121996804281232<br>
                                                手机号：13757988128<br>
                                                住址：安徽省蚌埠市留山镇西山村32号
                                        </md-card>
                                    </div>
                                </div>
                                <div flex='50' layout="column">
                                    <div flex="33">
                                        <md-card md-theme-watch layout-fill>
                                            <canvas id="base" class="chart-bubble" chart-data="data" chart-series="series" chart-labels="bubble" layout="row" layout-align="center center"> </canvas>
                                        </md-card>
                                    </div>
                                    <div flex="33">
                                        <md-card md-theme-watch layout-fill>
                                            <canvas id="base" class="chart-bubble" chart-data="data" chart-series="series" chart-labels="bubble"> </canvas>
                                        </md-card>
                                    </div>
                                    <div flex="33">
                                        <md-card md-theme-watch layout-fill>
                                            <canvas id="base" class="chart-bubble" chart-data="data" chart-series="series" chart-labels="bubble"> </canvas>
                                        </md-card>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </md-content>
                </md-tab>

                <md-tab label="对象分析">
                    <md-content class="md-padding">
                        <div id="container1" layout-fill style="height: 300px;"></div>
                    </md-content>
                </md-tab>
            </md-tabs>
        </div>
    </div>


</body>

</html>

<script>
    function loadJScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://api.map.baidu.com/api?type=webgl&v=1.0&ak=drGhos38GdxD7WMppGW4NdswaQVeXEhX&callback=init';
        document.body.appendChild(script);
    }

    function init() {
        var map = new BMapGL.Map('container'); // 创建Map实例
        var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
        map.centerAndZoom(point, 10);
        map.enableScrollWheelZoom(); // 启用滚轮放大缩小

        var map1 = new BMapGL.Map('container1'); // 创建Map实例
        var point1 = new BMapGL.Point(116.404, 39.915); // 创建点坐标
        map1.centerAndZoom(point, 10);
        map1.enableScrollWheelZoom(); // 启用滚轮放大缩小
    }
    window.onload = loadJScript; // 异步加载地图
</script>